<template>
  <div class="my-collapse-item">
    <div
      class="my-collapse-item__header"
      :class="{'active':isActive,disabled}"
      @click="handleHeaderClick"
    >
      <span>{{title}}</span>
      <i class="my-icon-arrow-down"></i>
    </div>
    <my-collapse-transition>
      <div v-show="isActive" class="my-collapse-item__body">
        <div class="my-collapse-item__content">
          <slot></slot>
        </div>
      </div>
    </my-collapse-transition>
  </div>
</template>

<script>
import MyCollapseTransition from "./transition";
export default {
  name: "MyCollapseItem",
  components: { MyCollapseTransition },
  props: {
    title: String,
    value: String | Number,
    disabled: Boolean,
  },
  data() {
    return {
      height: 0,
    };
  },
  inject: ["collapse"],
  computed: {
    isActive() {
      return this.collapse.activeValues.indexOf(this.value) > -1;
    },
  },
  methods: {
    handleHeaderClick() {
      if (this.disabled) return;
      this.collapse.$emit("handleItemClick", this);
    },
  },
};
</script>

<style>
</style>